<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" class="user">
    <br>
    <input type="text" class="pwd">
    <br>
    <button>注册</button>

    <script>

        // 把用户名和密码存起来   暂时存储在cookie中

        // 约定
        //   1名称写用户名，值写密码
        //   2 用户名唯一
        //   

        // 逻辑
        //  1 获取用户名和密码
        //  2 判断用户名是否存在
        //      用户名存在就警告
        //      用户名不存在就可以注册   --- 存入cookie

        const oBtn = document.querySelector('button');
        const oUser = document.querySelector('.user');
        const oPwd = document.querySelector('.pwd');



        const cookies = document.cookie;
        console.log(cookies);

        // 切割成数组   cookie的bug  自动生成多了一个空格
        let arr = cookies.split('; ');
        // 继续切割
        arr = arr.map(item => {
            const arr2 = item.split('=');
            return {
                name: arr2[0],
                content: arr2[1]
            }
        });

        console.log(arr);




        oBtn.onclick = function () {
            // 
            const username = oUser.value;
            const pwd = oPwd.value;

            // 校验 。。。。

            if (username && pwd) {   // 非空校验  

                // 判断用户名是否已经被注册
                const res = arr.find(item => item.name === username);
                if (res) {
                    alert('用户名已注册');
                }
                else {
                    // 把数据存起来
                    document.cookie = `${username}=${pwd};path=/;expires=${new Date()}`;
                    // 跳转到 登陆
                    location.href = '';
                }


            }


        }





    </script>

</body>

</html>